import {Graph, ObjectExt} from '@antv/x6'
import '@antv/x6-vue-shape'

import CustomEvent from "@/assets/nodeIcon/customEvent.png";

import {portCommonAttr} from '../port/portConfig'
import {NodesMap, NodeRectInfo, ActionNodeList} from "@/views/workTable/nodes/nodeConfig";

import CustomImage from "@/views/workTable/components/customImage.vue";
import PlaceholderNode from '@/views/workTable/components/PlaceholderNode.vue'
import CardNode from "@/views/workTable/components/cardNode.vue";

Graph.registerNode('custom-image', {
  inherit: 'vue-shape',
  width: NodeRectInfo.width,
  height: NodeRectInfo.height,
  component: {
    render: () => {
      return <CustomImage />
    }
  },
  attrs: {
    label: {
      visibility: 'hidden',
      style: 'display: none'
    }
  },
  data: {},
  ports: {
    groups: {
      in: {
        position: 'top',
        attrs: portCommonAttr,
      },
      out: {
        position: 'bottom',
        attrs: portCommonAttr,
      },
      top: {
        position: 'top',
        attrs: portCommonAttr,
      },
      bottom: {
        position: 'bottom',
        attrs: portCommonAttr,
      },
      left: {
        position: 'left',
        attrs: portCommonAttr,
      },
      right: {
        position: 'right',
        attrs: portCommonAttr,
      },
    },
  },
})

// 开始
Graph.registerNode(
  NodesMap['start'].key,
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {label, ...others} = metadata
      let name
      if (metadata.data && metadata.data.canvasData && metadata.data.canvasData.name) {
        name = metadata.data.canvasData.name
      } else if (metadata.data && metadata.data.dialogData && metadata.data.dialogData.name) {
        name = metadata.data.dialogData.name
      } else {
        name = NodesMap['start'].label
      }
      // const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      ObjectExt.setByPath(others, 'attrs/label/text', name)
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', NodesMap['start'].iconSrc)

      return others
    },
    ports: {
      items: [
        // {
        //   group: 'out',
        // },
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 1,
  },
  true,
)

// 条件判断|条件选择
Graph.registerNode(
  NodesMap['condition'].key,
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {label, ...others} = metadata
      const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      ObjectExt.setByPath(others, 'attrs/label/text', name || NodesMap['condition'].label)
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', NodesMap['condition'].iconSrc)

      return others
    },
    ports: {
      groups: {
        outTrue: {
          position: 'left',
          attrs: portCommonAttr,
        },
        outFalse: {
          position: 'right',
          attrs: portCommonAttr
        }
      },
      items: [
        // {
        //   group: 'in',
        // },
        // {
        //   group: 'outTrue',
        // },
        // {
        //   group: 'outFalse',
        // },
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 6,
  },
  true,
)

// 路由分支 - 并行路由
Graph.registerNode(
  NodesMap['switcherConcurrent'].key,
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {label, ...others} = metadata
      const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      ObjectExt.setByPath(others, 'attrs/label/text', name || NodesMap['switcherConcurrent'].label)
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', NodesMap['switcherConcurrent'].iconSrc)

      return others
    },
    ports: {
      // groups: {
        // in: {
        //   position: 'top',
        //   attrs: portCommonAttr,
        // },
        // out: {
        //   position: 'bottom',
        //   attrs: portCommonAttr,
        // }
      // },
      items: [
        // {
        //   group: 'in',
        // },
        // {
        //   group: 'out',
        // },
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 5,
  },
  true,
)

// 路由 - 条件
Graph.registerNode(
  NodesMap['switcherCondition'].key,
  {
    inherit: 'switcherConcurrent',
    propHooks(metadata) {
      const {label, ...others} = metadata
      const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      ObjectExt.setByPath(others, 'attrs/label/text', name || NodesMap['switcherCondition'].label)
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', NodesMap['switcherCondition'].iconSrc)

      return others
    },
    baseType: 4,
  }
)

// 等待
Graph.registerNode(
  NodesMap['wait'].key,
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {label, ...others} = metadata
      const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      ObjectExt.setByPath(others, 'attrs/label/text', name || NodesMap['wait'].label)
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', NodesMap['wait'].iconSrc)

      return others
    },
    ports: {
      groups: {
        in: {
          position: 'top',
          attrs: portCommonAttr,
        },
        out: {
          position: 'bottom',
          attrs: portCommonAttr,
        }
      },
      items: [
        // {
        //   group: 'in',
        // },
        // {
        //   group: 'out',
        // },
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 3,
  },
  true,
)

// abtest
Graph.registerNode(
  NodesMap['abtest'].key,
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {label, ...others} = metadata
      // const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      ObjectExt.setByPath(others, 'attrs/label/text', label || NodesMap['abtest'].label)
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', NodesMap['abtest'].iconSrc)

      return others
    },
    ports: {
      items: [
        // {
        //   group: 'in',
        // },
        // {
        //   group: 'out',
        // },
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 7,
  },
  true,
)

// 结束
Graph.registerNode(
  NodesMap['end'].key,
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {label, ...others} = metadata

      // const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      // ObjectExt.setByPath(others, 'attrs/label/text', name || '结束')
      ObjectExt.setByPath(others, 'attrs/label/text', label || NodesMap['end'].label)
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', NodesMap['end'].iconSrc)

      return others
    },
    data: {
      dialogData: {
        name: '结束'
      }
    },
    ports: {
      items: [
        // {
        //   group: 'in',
        // },
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 2,
  },
  true,
)

// 动作通用节点
Graph.registerNode(
  'action',
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {...others} = metadata
      const name = metadata.data && metadata.data.dialogData && metadata.data.dialogData.name
      ObjectExt.setByPath(others, 'attrs/label/text', name)
      return others
    },
    data: {
      inheritFromNode: 'action',
    },
    ports: {
      groups: {
        in: {
          position: 'top',
          attrs: portCommonAttr,
        },
        out: {
          position: 'bottom',
          attrs: portCommonAttr,
        }
      },
      items: [
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 3,
  },
  true,
)

// 注册所有动作节点
ActionNodeList.forEach(actionNodeConfig => {
  Graph.registerNode(actionNodeConfig.key, {
    inherit: 'action',
    propHooks(metadata) {
      const {...others} = metadata
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', actionNodeConfig.iconSrc)
      return others
    },
  })
})

// 事件通用节点
Graph.registerNode(
  'event',
  {
    inherit: 'custom-image',
    propHooks(metadata) {
      const {label, iconSrc, ...others} = metadata
      // console.log('event propHooks metadata', metadata)
      ObjectExt.setByPath(others, 'attrs/label/text', label || '自定义事件')
      ObjectExt.setByPath(others, 'attrs/icon/xlink:href', iconSrc || CustomEvent)

      return others
    },
    data: {
      inheritFromNode: 'event',
    },
    ports: {
      groups: {
        in: {
          position: 'top',
          attrs: portCommonAttr,
        },
        out: {
          position: 'bottom',
          attrs: portCommonAttr,
        }
      },
      items: [
        // {
        //   group: 'in',
        // },
        // {
        //   group: 'out',
        // },
        {
          group: 'top',
        },
        {
          group: 'bottom',
        },
        {
          group: 'left',
        },
        {
          group: 'right'
        }
      ]
    },
    baseType: 3,
  },
  true,
)

// 数据详情 卡片式节点 展示 累计进入 触达成功等信息
Graph.registerNode("data-card", {
  inherit: "vue-shape",
  width: 300,
  height: 140,
  component: {
    template: `<card-node />`,
    components: {
      CardNode,
    },
  },
  ports: {
    groups: {
      in: {
        position: 'top',
        attrs: portCommonAttr,
      },
      out: {
        position: 'bottom',
        attrs: portCommonAttr,
      },
      outTrue: {
        position: 'bottom',
        attrs: portCommonAttr
      },
      outFalse: {
        position: 'bottom',
        attrs: portCommonAttr
      }
    },
    items: [
      {
        group: 'in',
      },
      {
        group: 'out',
      },
    ]
  },
});

// 占位节点
Graph.registerNode("placeholder", {
  inherit: "vue-shape",
  width: 80,
  height: 95,
  component: {
    template: `<placeholder-node />`,
    components: {
      PlaceholderNode,
    },
  },
  data: {
    dialogData: {},
  },
  ports: {
    groups: {
      top: {
        position: 'top',
        attrs: portCommonAttr,
      },
      right: {
        position: 'right',
        attrs: portCommonAttr,
      },
      bottom: {
        position: 'bottom',
        attrs: portCommonAttr,
      },
      left: {
        position: 'left',
        attrs: portCommonAttr,
      }
    },
    items: [
      {
        group: 'top',
      },
      {
        group: 'right',
      },
      {
        group: 'bottom',
      },
      {
        group: 'left',
      },
    ]
  },
});
